// App.tsx
import { useState } from 'react';
import './AddXunDan.scss';
import { DatePicker, DatePickerProps, Input, Select } from 'antd';
import { useNavigate } from 'react-router-dom';
import { RangePickerProps } from 'antd/es/date-picker';

interface CargoItem {
  id: number;
  name: string;
  spec: string;
  package: string;
  quantity: number;
  weight: number;
  volume: number;
}

const AddXunDan = () => {
  // 运输地址状态
  const [origin, setOrigin] = useState('');
  const [destination, setDestination] = useState('');



  // 货物信息
  const [cargoItems, setCargoItems] = useState<CargoItem[]>([
    {
      id: 1,
      name: '白糖',
      spec: '1x0.8',
      package: '台',
      quantity: 5,
      weight: 50,
      volume: 6
    },
    {
      id: 2,
      name: '调味品',
      spec: '1x0.5',
      package: '袋',
      quantity: 3,
      weight: 30,
      volume: 30
    }
  ]);

  // 备注
  const [remark, setRemark] = useState('');

  // 计算合计
  const totals = cargoItems.reduce((acc, item) => ({
    quantity: acc.quantity + item.quantity,
    weight: acc.weight + item.weight,
    volume: acc.volume + item.volume
  }), { quantity: 0, weight: 0, volume: 0 });

  // 处理货物行操作
  const handleAddRow = () => {
    setCargoItems([...cargoItems, {
      id: Date.now(),
      name: '',
      spec: '',
      package: '台',
      quantity: 1,
      weight: 50,
      volume: 30
    }]);
  };

  const handleRemoveRow = (id: number) => {
    setCargoItems(cargoItems.filter(item => item.id !== id));
  };
  const navigate = useNavigate()
  const onOk1 = (value: DatePickerProps['value'] | RangePickerProps['value']) => {
    console.log('onOk: ', value);
  };
  const onOk2 = (value: DatePickerProps['value'] | RangePickerProps['value']) => {
    console.log('onOk: ', value);
  };
  return (
    <div className="container">
      {/* 运输地址 */}
      <section className="address-section">
        <h2>运输地址</h2>
        <div className="address-fields">
          <div className="input-group">
            <label>始发地</label>
            <Select
              value={origin}
              onChange={(value) => setOrigin(value)}
              showSearch
              placeholder="请选择始发地"
              optionFilterProp="children"
              style={{ width: '100%' }}
            >
              <Select.Option value="">上海市</Select.Option>
              <Select.Option value="pudong">保定市</Select.Option>
              <Select.Option value="hongqiao">秦皇岛</Select.Option>
            </Select>
            <Input placeholder="请输入始发地" variant="borderless" />
          </div>
          <div className="input-group">
            <label>目的地</label>
            <Select
              value={destination}
              onChange={(value) => setDestination(value)}
              showSearch
              placeholder="请选择目的地"
              optionFilterProp="children"
              style={{ width: '100%' }}
            >
              <Select.Option value="">深圳市</Select.Option>
              <Select.Option value="pudong">上海市</Select.Option>
              <Select.Option value="hongqiao">惠州市</Select.Option>
            </Select>
            <Input placeholder="请输入始发地" variant="borderless" />
          </div>
        </div>
      </section>

      {/* 计划时间 */}
      <section className="time-section">
        <h2>计划时间</h2>
        <div className="date-pickers">
          <div className="date-group">
            <label>计划装货时间</label>
            <DatePicker
              showTime
              placeholder='请选择装货时间'
              onChange={(value, dateString) => {
                console.log('Selected Time: ', value);
                console.log('Formatted Selected Time: ', dateString);
              }}
              onOk={onOk1}
            />
          </div>
          <div className="date-group">
            <label>计划到货时间</label>
            <DatePicker
              showTime
              placeholder='请选择到货时间'
              onChange={(value, dateString) => {
                console.log('Selected Time: ', value);
                console.log('Formatted Selected Time: ', dateString);
              }}
              onOk={onOk2}
            />
          </div>
        </div>
      </section>

      {/* 货物信息 */}
      <section className="cargo-section">
        <h2>货物信息</h2>
        <table>
          <thead>
            <tr>
              <th>*货名</th>
              <th>规格型号</th>
              <th>*总包装</th>
              <th>*总数量</th>
              <th>*总重量kg</th>
              <th>总体积 m³</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {cargoItems.map((item) => (
              <tr key={item.id}>
                <td>
                  <input
                    value={item.name}
                    style={{ border: 'none' }}
                    onChange={(e) => setCargoItems(cargoItems.map((cargoItem) => cargoItem.id === item.id ? { ...cargoItem, name: e.target.value } : cargoItem))/* 更新逻辑 */}
                  />
                </td>
                <td>
                  <input
                    value={item.spec}
                    style={{ border: 'none' }}
                    onChange={(e) => setCargoItems(cargoItems.map((cargoItem) => cargoItem.id === item.id ? { ...cargoItem, spec: e.target.value } : cargoItem))/* 更新逻辑 */}
                  />
                </td>
                <td>
                  <select
                    value={item.package}
                    style={{ border: 'none' }}
                    onChange={(e) => setCargoItems(cargoItems.map((cargoItem) => cargoItem.id === item.id ? { ...cargoItem, package: e.target.value } : cargoItem))/* 更新逻辑 */}
                  >
                    <option value="台">台</option>
                    <option value="袋">袋</option>
                    <option value="箱">箱</option>
                  </select>
                </td>
                <td>
                  <input
                    type="number"
                    value={item.quantity}
                    style={{ border: 'none' }}
                    onChange={(e) => setCargoItems(cargoItems.map((cargoItem) => cargoItem.id === item.id ? { ...cargoItem, package: e.target.value } : cargoItem))/* 更新逻辑 */}
                  />
                </td>
                <td>{item.weight}</td>
                <td>{item.volume}</td>
                <td>
                  <button
                    className="remove-btn"
                    onClick={() => handleRemoveRow(item.id)}
                  >-</button>
                </td>
              </tr>
            ))}
            <tr className="total-row">
              <td colSpan={3}>合计</td>
              <td>{totals.quantity}</td>
              <td>{totals.weight}</td>
              <td>{totals.volume}</td>
              <td>
                <button className="add-btn" onClick={handleAddRow}>+</button>
              </td>
            </tr>
          </tbody>
        </table>
      </section>

      {/* 备注 */}
      <section className="remark-section">
        <h2>备注</h2>
        <textarea
          value={remark}
          onChange={(e) => setRemark(e.target.value)}
          placeholder="添加备注"
        />
        <div className="actions">
          <button className="cancel" onClick={() => { navigate('/admin/xundanjia') }}>取消</button>
          <button className="submit" onClick={() => { navigate('/admin/detailxundan') }}>提交</button>
        </div>
      </section>
    </div>
  );
};

export default AddXunDan;